<template>
  <div class="phone-Model">
    <div class="smscontent">
      <div class="content-Model">
        <div>【{{sign}}】{{_content_}}</div>
        <img src="@/assets/message.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
import cloneDeep from 'lodash.clonedeep'

export default {
  data() {
    return {}
  },

  components: {},
  props: {
    sign: {
      type: String,
      default: ''
    },
    content: {
      type: String,
      default: ''
    }
  },
  mounted() {},
  computed: {
    _content_:function(){
      let reg = /\{.*\}/g
      // content.match(reg, function())
      let content = cloneDeep(this.content)
      let _content_ = content.replaceAll('{','').replaceAll('}','')
      return _content_
    }
  },
  watch: {},
  methods: {},
  destroyed() {},
}
</script>
<style lang='less' scoped>
.phone-Model {
  margin: 0 auto;
  width: 353.25px;
  background: #fff;
  -webkit-box-shadow: 0 0 49px 0 rgb(39 87 255 / 15%);
  box-shadow: 0 0 49px 0 rgb(39 87 255 / 15%);
  border-radius: 40px;
  border: 14px solid #7a83a555;
  background: url('~@/assets/phone.png') no-repeat;
  background-size: 100% auto;
  overflow-y: auto;
  .smscontent {
    margin-top: 100px;
    height: 500px;
    overflow-y: auto;
  }
  .content-Model {
    width: 80%;
    background-color: #e6e5ea;
    border-radius: 10px;
    margin: auto;
    padding: 15px;
    margin-top: 10px;
    line-height: 20px;
    word-break: break-all;
    position: relative;
    margin-bottom: 20px;
    white-space: pre-wrap;
    img {
      position: absolute;
      left: -12px;
      bottom: 0;
    }
  }
}
</style>